<template>
  <el-container class="control">
    <el-aside width="auto">
      <router-link to="/control" class="logo"></router-link>
      <el-menu :collapse="$store.state.collapsed" unique-opened router :default-active="defaultActive">
        <treemenu :data="menus" />
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div class="search">
          <el-button
            icon="el-icon-s-fold"
            size="small"
            @click="$store.commit('ToggleMenu')"
          />
          <el-input
            suffix-icon="el-icon-search"
            v-model="keyword"
            placeholder="请搜索"
            size="small"
            clearable
          />
        </div>

        <div class="rightbar">
          <router-link to="/control">
            <i class="el-icon-house" />
          </router-link>
          <el-badge :value="12">
            <i class="el-icon-bell" />
          </el-badge>

          <el-dropdown trigger="click" @command="handleCommand">
            <p class="iavatar">
              <el-avatar :src="info.avatar" :size="30" />
              <span class="nickname">{{ info.nickname }}</span>
            </p>
            <el-dropdown-menu slot="dropdown" style="width: 140px">
              <el-dropdown-item icon="el-icon-setting"
                >个人设置</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-lock">修改密码</el-dropdown-item>
              <el-dropdown-item icon="el-icon-refresh"
                >在线升级</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-switch-button" command="logout" divided
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <!-- 嵌套路由子路由视图显示 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Treemenu from '@/components/Treemenu.vue'
import { mapActions, mapState } from 'vuex'
export default {
  components: {
    Treemenu
  },
  data () {
    return {
      defaultActive: location.hash.slice(1),
      keyword: '',
      menus: [
        {
          id: 1,
          type: 0,
          icon: 'el-icon-monitor',
          label: '控制面板',
          children: [{ label: '仪表盘', path: '/control/dashboard' }]
        },
        {
          id: 2,
          type: 0,
          icon: 'el-icon-user',
          label: '用户管理',
          children: [{ label: '用户列表', path: '/control/admin' }]
        },
        {
          id: 3,
          type: 0,
          icon: 'el-icon-picture-outline',
          label: '轮播管理',
          children: [{ label: '轮播列表', path: '/control/carousel' }]
        },
        {
          id: 4,
          type: 0,
          icon: 'el-icon-picture-outline',
          label: '院校管理',
          children: [{ label: '院校列表', path: '/control/schoolList' }]
        },
        {
          id: 5,
          type: 0,
          icon: 'el-icon-picture-outline',
          label: '专业管理',
          children: [{ label: '专业列表', path: '/control/majorList' }]
        },
        {
          id: 6,
          type: 0,
          icon: 'el-icon-picture-outline',
          label: '新闻管理',
          children: [{ label: '新闻列表', path: '/control/newsList' }]
        }
      ]
    }
  },
  watch: {
    $route () {
      this.defaultActive = location.hash.slice(1)
    }
  },
  computed: mapState('admin', ['info']),
  methods: {
    ...mapActions('admin', ['GetInfo']),
    handleCommand (command) {
      if (command === 'logout') {
        this.$confirm('你确定要退出当前登陆吗', '提示').then(() => {
          localStorage.removeItem('Gx-Token')
          this.$router.replace('/login')
        }).catch(() => {})
      }
    }
  },
  created () {
    this.GetInfo()
  }
}
</script>

<style lang="less">
.control {
  height: 100vh;
  .el-aside {
    background-color: #3c13af;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.3);
    z-index: 9;

    .logo {
      display: block;
      height: 60px;
      background: url(../assets/img/logo3.png) -40px 50%;
    }
    .logo span{
      margin-right: 20px;
    }

    .el-menu {
      &:not(.el-menu--collapse) {
        width: 230px;
      }
      border-right: none;
      background-color: transparent;

      //图标颜色
      [class*="el-icon-"] {
        color: rgba(255, 255, 255, 0.6);
      }

      // 菜单字体默认样式
      .el-submenu__title,
      .el-menu-item {
        color: rgba(255, 255, 255, 0.9);
        // 菜单划过样式
        &:hover {
          background-color: rgba(255, 255, 255, 0.25);
        }
      }

      //菜单选中颜色
      .el-menu-item.is-active {
        background-color: rgba(0, 0, 0, 0.2);
        color: white;
      }
    }
  }
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    .search {
      display: flex;
      align-items: center;
      .el-button {
        padding: 7.5px 12px;
        font-size: 15px;
      }
      .el-input {
        margin-left: 10px;
        width: 200px;
      }
    }
    .rightbar {
      display: flex;
      align-items: center;
      [class*="el-icon"] {
        font-size: 18px;
        margin-left: 8px;
        margin-right: 8px;
      }
      .iavatar {
        display: flex;
        align-items: center;
        margin-left: 30px;
        cursor: pointer;
        .nickname {
          margin-left: 8px;
        }
      }
    }
  }
}

// 迷你菜单 （收缩菜单）
.el-menu--popup {
  .el-submenu__title,
  .el-menu-item {
    color: #606266;
  }
}
</style>
